<a-layout-header
  style="display: flex; background-color: #ffffff;box-shadow:0 2px 6px 0 rgba(0,0,0,.15);position: relative;z-index: 10;padding: 0;"
  class="w-full">
  <div style=" height: 64px;" class="flex justify-between w-full items-center ml-3">
    <div class="flex  items-center">
      <div @click="goto('/admin')" class="cursor-pointer flex items-center">
        <svg width="140" height="35" xmlns="http://wwww.w3.org/2000/svg">
          <g transform="translate(-115 0)">
            <path id="path337059"
              d="m 412.48869,-36.792 q 10.512,0 14.688,4.536 4.176,4.464 2.664,14.904 -1.44,10.08 -6.192,14.184 -4.68,4.032 -14.904,4.032 -10.44,0 -14.76,-4.464 -4.248,-4.464 -2.736,-14.76 1.44,-10.224 6.12,-14.328 4.68,-4.104 15.12,-4.104 z m -0.216,9.216 q -3.6,0 -5.04,2.016 -1.44,1.944 -2.376,8.208 -0.792,5.544 0,7.344 0.864,1.728 4.32,1.728 3.384,0 4.824,-2.016 1.44,-2.016 2.304,-8.064 0.864,-5.616 0.072,-7.416 -0.792,-1.8 -4.104,-1.8 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#09f463" stroke="#09f463"
              transform="scale(0.4) translate(0 60)"></path>
            <path id="path337061"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 448.67319,-35.784 v 6.552 q 7.128,-7.416 14.616,-7.416 12.456,0 9.864,19.584 -0.72,5.616 -2.232,9.288 -1.44,3.672 -3.744,5.544 -2.304,1.872 -4.824,2.52 -2.448,0.72 -5.976,0.72 -5.184,0 -10.224,-1.008 0,3.312 -0.504,6.768 l -1.08,6.552 h -13.104 l 6.84,-49.104 z m -1.08,28.368 h 4.32 q 4.392,0 5.688,-1.656 1.368,-1.656 2.232,-7.776 0.792,-5.904 0.36,-7.704 -0.432,-1.872 -2.448,-1.872 -3.672,0 -8.28,4.464 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#07e771" stroke="#07e771"
              transform="scale(0.4) translate(0 60)"></path>
            <path id="path337063"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 511.77894,-10.152 0.864,8.136 q -6.408,2.88 -16.416,2.88 -11.088,0 -15.12,-4.68 -4.032,-4.752 -2.952,-14.544 1.224,-10.728 6.12,-14.544 4.968,-3.888 15.192,-3.888 10.152,0 13.896,3.24 3.744,3.168 2.808,9.648 -0.72,4.824 -4.176,6.84 -3.384,1.944 -10.8,2.52 l -9.72,0.72 q 0.072,2.736 1.44,3.672 1.368,0.864 4.608,0.864 6.84,0 14.256,-0.864 z m -19.512,-10.584 6.048,-0.576 q 2.664,-0.216 3.816,-0.936 1.224,-0.792 1.44,-2.952 0.144,-1.728 -0.72,-2.232 -0.864,-0.576 -3.6,-0.504 -3.312,0.072 -4.752,1.512 -1.368,1.368 -2.232,5.688 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#05da7f" stroke="#05da7f"
              transform="scale(0.4) translate(0 60)"></path>
            <path id="path337065"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 533.67931,-35.784 0.144,6.696 q 7.848,-7.704 15.984,-7.704 4.608,0 7.2,2.664 2.592,2.664 1.872,7.56 L 555.13531,0 h -13.104 l 3.168,-22.464 q 0.288,-2.016 -0.216,-2.664 -0.432,-0.72 -1.944,-0.576 -3.384,0.072 -8.496,4.104 l -3.024,21.6 h -13.104 l 4.968,-35.784 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#04ce8c" stroke="#04ce8c"
              transform="scale(0.4) translate(0 60)">
            </path>
            <path id="path337067"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 582.73831,-27.576 -2.16,15.408 q -0.288,1.728 0.216,2.304 0.504,0.504 2.376,0.504 h 4.464 l 0.648,8.712 q -4.176,1.584 -11.016,1.584 -5.328,0 -8.136,-2.808 -2.736,-2.808 -2.016,-7.56 l 2.664,-18.144 h -6.264 l 1.008,-7.848 6.48,-0.36 1.44,-9.648 h 12.888 l -1.368,9.648 h 9.144 l -1.152,8.208 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#02c19a" stroke="#02c19a"
              transform="scale(0.4) translate(0 60)">
            </path>
            <path id="path337069"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 620.52256,-35.784 h 14.184 q -1.224,7.848 -4.176,16.632 -2.304,6.768 -5.544,12.528 -2.376,3.96 -5.04,5.328 -2.592,1.296 -7.344,1.296 h -9.576 q -1.512,0 -2.592,-0.936 -1.008,-0.936 -1.152,-2.376 l -4.608,-32.472 h 14.256 l 1.152,27.576 h 0.72 q 1.44,0 2.16,-0.72 0.792,-0.72 1.944,-3.24 1.728,-3.744 3.168,-9.504 1.368,-5.472 2.448,-14.112 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#00b4a8" stroke="#00b4a8"
              transform="scale(0.4) translate(0 60)">
            </path>
          </g>
          <image
            xlink:href=""
            id="icon" x="0" y="0" width="35" height="35"></image>
        </svg>
      </div>
      <div>
        <svg width="115" height="35" xmlns="http://wwww.w3.org/2000/svg">
          <g transform="translate(-130 4)">
            <path id="path424473"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 422.288,-5.976 -0.864,4.032 h -28.512 l 0.864,-4.032 z m -1.584,-19.44 -0.792,3.744 h -23.04 l 0.792,-3.744 z m -25.056,9.864 h 31.536 l 3.24,-16.056 H 390.68 l -7.632,37.944 h 8.208 l 0.432,-1.944 H 420.2 l -0.432,1.944 h 8.496 l 3.744,-18.576 H 395 Z M 448.28,-55.944 H 427.4 c 0.936,-1.224 1.728,-2.448 2.52,-3.672 l -7.776,-1.944 c -2.232,3.744 -5.472,7.488 -8.928,10.44 l 0.936,-4.824 h -15.984 c 0.864,-1.152 1.656,-2.304 2.376,-3.456 l -7.56,-2.16 c -3.24,5.472 -8.496,11.016 -13.536,14.616 1.8,0.936 4.68,3.24 6.12,4.608 2.232,-1.872 4.68,-4.248 7.128,-6.912 h 1.224 c 0.864,2.376 1.656,5.112 1.872,6.912 l 8.136,-2.16 c -0.288,-1.296 -0.792,-3.024 -1.44,-4.752 h 8.424 c -0.72,0.504 -1.44,1.008 -2.088,1.44 0.864,0.432 2.088,1.08 3.24,1.8 h -3.168 l -1.008,5.04 h -26.496 l -2.88,14.256 h 8.064 l 1.584,-7.848 h 45.864 l -1.584,7.848 h 8.352 l 2.88,-14.256 h -27.576 l 0.792,-3.888 c 1.584,-1.296 3.168,-2.736 4.824,-4.392 h 4.176 c 1.224,2.376 2.448,5.184 2.88,7.056 l 8.352,-2.232 c -0.36,-1.368 -1.152,-3.096 -2.016,-4.824 h 11.88 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#04ce8c" stroke="#04ce8c"
              transform="scale(0.36) translate(0 60)">
            </path>
            <path id="path424475"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 469.088,-16.2 c -2.448,0.792 -4.968,1.512 -7.488,2.232 l 2.88,-14.4 h 6.48 l 1.584,-7.848 h -6.48 l 2.52,-12.672 h 7.704 l 1.584,-7.992 h -23.76 l -1.584,7.992 h 7.92 l -2.52,12.672 h -7.272 l -1.584,7.848 h 7.272 l -3.384,16.92 c -3.528,0.936 -6.624,1.728 -9.288,2.376 l 0.216,8.712 c 7.344,-2.232 16.56,-4.968 25.056,-7.776 z m 15.408,-21.744 h 7.416 l -1.224,6.192 h -7.416 z m 2.592,-12.744 h 7.416 l -1.224,5.976 h -7.416 z m 20.52,5.976 h -7.128 l 1.224,-5.976 h 7.128 z m -2.592,12.96 h -7.128 l 1.224,-6.192 h 7.128 z m -11.952,28.008 1.368,-6.84 h 15.264 l 1.584,-7.704 h -15.264 l 1.224,-6.192 h 14.472 l 6.696,-33.48 h -37.584 l -6.696,33.48 h 14.4 l -1.224,6.192 H 472.4 l -1.584,7.704 h 14.904 l -1.368,6.84 H 464.48 l -1.512,7.776 h 46.296 l 1.512,-7.776 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#06db7e" stroke="#06db7e"
              transform="scale(0.36) translate(0 60)">
            </path>
            <path id="path424477"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="M 570.608,-17.28 568.16,-4.968 H 544.112 L 546.56,-17.28 Z M 533.6,6.192 h 8.28 l 0.648,-3.168 h 24.048 l -0.648,2.952 h 8.712 l 6.264,-31.176 h -41.04 z m 5.256,-47.448 1.224,-6.12 c 15.768,-1.008 33.336,-3.096 46.872,-6.552 l -5.544,-6.912 c -10.152,2.736 -25.848,4.824 -40.752,5.976 l -7.416,-1.152 -4.32,21.456 c -2.16,10.656 -5.688,24.984 -15.408,35.136 2.016,0.936 4.752,3.888 5.616,5.76 10.944,-11.016 15.696,-27.864 18.072,-39.384 h 51.12 l 1.656,-8.208 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#07e771" stroke="#07e771"
              transform="scale(0.36) translate(0 60)">
            </path>
            <path id="path424479"
              style="font-style:oblique;font-weight:800;font-size:72px;line-height:1;font-family:'Exo 2';font-variant-ligatures:none;text-align:center;text-anchor:middle"
              d="m 638.216,-17.352 -2.448,12.456 h -29.952 l 2.448,-12.456 z M 594.8,6.192 h 8.784 l 0.576,-2.88 h 29.952 l -0.576,2.808 h 9.216 l 6.336,-31.608 h -47.952 z m 42.264,-54.936 c 1.872,1.944 3.816,4.104 5.688,6.408 -8.352,0.36 -16.776,0.72 -24.624,1.008 4.464,-5.256 9.288,-11.304 13.464,-16.992 l -9.216,-3.168 c -3.744,6.336 -9.432,14.256 -14.688,20.52 -4.032,0.072 -7.848,0.216 -11.16,0.288 l -1.224,8.64 c 13.464,-0.504 33.768,-1.296 52.92,-2.304 1.512,2.376 2.664,4.608 3.312,6.552 l 8.568,-5.688 c -2.448,-6.192 -9.36,-14.472 -15.336,-20.304 z"
              stroke-width="0" stroke-linejoin="miter" stroke-miterlimit="2" fill="#09f463" stroke="#09f463"
              transform="scale(0.36) translate(0 60)">
            </path>
          </g>
        </svg>
      </div>
    </div>
    <div class="flex justify-end items-center w-full mr-5">

      <div @click="gotoBlank('/')" class="flex justify-center items-center head_btn">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M2.625 4.125V13.875H12.1875V4.125L2.625 4.125ZM1.5 4.125C1.5 3.50368 2.00368 3 2.625 3H12.1875C12.8088 3 13.3125 3.50368 13.3125 4.125V13.875C13.3125 14.4963 12.8088 15 12.1875 15H2.625C2.00368 15 1.5 14.4963 1.5 13.875V4.125Z"
            fill="currentColor"></path>
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M15.2522 5.373C15.833 4.75148 16.8747 5.16244 16.8747 6.01307V11.9715C16.8747 12.8272 15.8226 13.2356 15.2453 12.6041L14.2108 11.4726L14.2098 11.4715L14.0625 11.3104V6.64619L15.2522 5.373ZM15.7088 11.4439L15.7497 11.4886V6.48835L15.7038 6.53751L15.7062 6.53985L15.1875 7.09114V10.8728L15.7108 11.4421L15.7088 11.4439Z"
            fill="currentColor"></path>
        </svg>
        <span style="margin-left: 5px;">前往观影</span>
      </div>
      <div class="flex justify-center items-center " style="margin-right: 6px;">
        <a-badge :count="notifiCount" title="Custom hover text" style="margin-right: 10px;">
          <div class="flex justify-center items-center head_btn" @click="showNotifi">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M6.227 8.793a5.794 5.794 0 0111.545 0l.478 5.496a.861.861 0 00.125.377l1.282 2.084H4.342l1.283-2.084a.862.862 0 00.124-.377l.478-5.496zM12 2a7.295 7.295 0 00-7.267 6.663l-.465 5.345-1.438 2.337a1.25 1.25 0 001.065 1.905h3.802a4.25 4.25 0 008.442 0h3.966a1.25 1.25 0 001.065-1.905l-1.438-2.337-.465-5.345A7.294 7.294 0 0012 2zm2.622 16.25H9.213a2.75 2.75 0 005.41 0z"
                fill="currentColor"></path>
            </svg>
            <span style="margin-left: 5px;">消息</span>
          </div>
      </div>

      </a-badge>

      <a-avatar class="cursor-pointer" @click="deving">G</a-avatar>
    </div>
  </div>
</a-layout-header>
<a-drawer v-model:open="drawerState" class="custom-class" root-class-name="root-class-name" title="消息中心"
  placement="right" @close="closeDrawerHandle">
  <template #extra>
    <div @click="readNotifi" class="flex justify-center items-center cursor-pointer" style="color: #999">
      <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"
        class="xgpc-msg-center__clearAllUnreadCount_broom disabled">
        <path
          d="M15.115 4.647l1.985.408-.627 2.763 2.164.909c.41.2.642.476.748.785.075.218.183 1.415.27 3.607L8.002 10.09l2.128-3.068c.118-.154.335-.297.59-.364.214-.057.445-.057.625-.008l2.197.594.93-2.022a.875.875 0 01.643-.575z"
          stroke="currentColor" stroke-width="1.221" stroke-linejoin="round"></path>
        <path
          d="M8.702 10.338l10.128 2.53c-.339 3.246-1.136 5.577-2.337 6.485l-2.323-.73c.085-.643.16-1.201.221-1.674l.013-.1-.015.017a9.45 9.45 0 01-.374.392l-.185.174c-.515.461-.991.615-1.304.552-.34-.068-.796-.181-2.7-.81l-.128-1.315-1.047.924c-.785-.26-1.321-.448-2.429-.82l-.31-.104c-.609-.204-1.131-.38-1.567-.528a4.884 4.884 0 001.466-.54c1.429-.808 2.375-2.308 2.891-4.453z"
          stroke="currentColor" stroke-width="1.221" stroke-linejoin="round"></path>
      </svg>
      <span>全部已读</span>
    </div>
  </template>
  <div v-for="(itm, idx) in notifiList" key="idx">
    <div>
      <span>{{itm.title}}</span>
      <span style="padding-left: 10px; font-size: 12px; color: #73767a;">{{itm.timeZh}}</span>
      <span style="padding-left: 10px; font-size: 12px; color: #73767a;">{{itm.is_read==1?'':"未读"}}</span>
    </div>
    <div>
      <span>{{itm.content}}</span>
    </div>
    <a-divider></a-divider>
  </div>
</a-drawer>
<script>
  const formatPast = (date, type = "default", zeroFillFlag = true) => {
    // 定义countTime变量，用于存储计算后的数据
    let countTime;
    // 获取当前时间戳
    let time = new Date().getTime();
    // 转换传入参数为时间戳
    let afferentTime = new Date(date).getTime();
    // 当前时间戳 - 传入时间戳
    time = Number.parseInt(`${time - afferentTime}`);
    if (time < 10000) {
      // 10秒内
      return "刚刚";
    } else if (time < 60000) {
      // 超过10秒少于1分钟内
      countTime = Math.floor(time / 1000);
      return `${countTime}秒前`;
    } else if (time < 3600000) {
      // 超过1分钟少于1小时
      countTime = Math.floor(time / 60000);
      return `${countTime}分钟前`;
    } else if (time < 86400000) {
      // 超过1小时少于24小时
      countTime = Math.floor(time / 3600000);
      return `${countTime}小时前`;
    } else if (time >= 86400000 && type == "default") {
      // 超过二十四小时（一天）且格式参数为默认"default"
      countTime = Math.floor(time / 86400000);
      //大于等于365天
      if (countTime >= 365) {
        return `${Math.floor(countTime / 365)}年前`;
      }
      //大于等于30天
      if (countTime >= 30) {
        return `${Math.floor(countTime / 30)}个月前`;
      }
      return `${countTime}天前`;
    } else {
      // 一天（24小时）以上且格式不为"default"则按传入格式参数显示不同格式
      // 数字补零
      let Y = new Date(date).getFullYear();
      let M = new Date(date).getMonth() + 1;
      let zeroFillM = M > 9 ? M : "0" + M;
      let D = new Date(date).getDate();
      let zeroFillD = D > 9 ? D : "0" + D;
      // 传入格式为"-" "/" "."
      if (type == "-" || type == "/" || type == ".") {
        return zeroFillFlag
          ? Y + type + zeroFillM + type + zeroFillD
          : Y + type + M + type + D;
      }
      // 传入格式为"年月日"
      if (type == "年月日") {
        return zeroFillFlag
          ? Y + type[0] + zeroFillM + type[1] + zeroFillD + type[2]
          : Y + type[0] + M + type[1] + D + type[2];
      }
      // 传入格式为"月日"
      if (type == "月日") {
        return zeroFillFlag
          ? zeroFillM + type[0] + zeroFillD + type[1]
          : M + type[0] + D + type[1]
      }
      // 传入格式为"年"
      if (type == "年") {
        return Y + type
      }

    }
  };
  function useHeader() {
    const notifiList = ref([]);
    const notifiCount = ref(0);
    const drawerState = ref(false);
    const notifiConf = reactive({
      isLoading: false,
      isEnd: false,
      limit: 25,
      offset: 0,
      count: 0
    })
    const goto = href => {
      window.location.href = href;
    }
    const gotoBlank = href => {
      window.open(href, '_blank')
    }

    const getNotifiList = async () => {
      try {
        let ret = await await axios.post('/v1/web/notifi/list', { limit: notifiConf.limit, offset: notifiConf.limit * notifiConf.offset });
        let rows = ret.data.data.rows.map(a => ({ ...a, timeZh: formatPast(new Date(a.created_at)) }))
        notifiList.value = notifiList.value.concat(rows);
        notifiConf.count = ret.data.data.count;
        ++notifiConf.offset;
        if (notifiConf.limit * notifiConf.offset >= notifiConf.count) {
          notifiConf.isEnd = true;
          Hint.success("通知消息全部加载完毕~");
        }
      } catch (e) {
        let msg = `获取消息列表失败`;
        Hint.error(msg);
        console.log(msg, e);
      }
    }
    const showNotifi = async () => {
      await getNotifiList();
      drawerState.value = true;
      setTimeout(() => {
        document.querySelector(".ant-drawer-body").addEventListener('scroll', async function () {
          let { scrollTop, scrollHeight, clientHeight } = this;
          if (scrollTop + clientHeight >= scrollHeight - 150) {
            if (!notifiConf.isLoading && !notifiConf.isEnd) {
              notifiConf.isLoading = true
              await getNotifiList();
              notifiConf.isLoading = false;
            }
          }
        })
      }, 100)

    }
    const closeDrawerHandle = () => {
      location.reload();
      // console.log("close")
      // notifiConf.isEnd = false;
      // notifiConf.isLoading = false;
      // notifiConf.offset = 0;
      // notifiList.value = [];
      // console.log(notifiConf, notifiList)
    }
    const getNotifiCount = async () => {
      try {
        let ret = await await axios.post('/v1/web/notifi/count');
        notifiCount.value = ret.data.data.count;
      } catch (e) {
        let msg = `获取消息列表失败`;
        Hint.error(msg);
        console.log(msg, e);
      }
    }
    const readNotifi = async () => {
      let notReadList = [];
      for (let itm of notifiList.value) {
        if (itm.is_read != 1) {
          itm.is_read = 1;
          notReadList.push(itm.id)
        }
      }
      await axios.post("/v1/web/notifi/read", { list: notReadList });
      Hint.success("操作成功~")
    }
    onMounted(async () => {
      let event = new EventSource("/v1/web/sse");
      event.addEventListener("open", function (e) {
        console.log("open")
      })
      event.addEventListener("message", function (e) {
        console.log(JSON.parse(e.data))
      })
      await getNotifiCount();

    })
    return {
      notifiList,
      drawerState,
      notifiCount,
      goto,
      gotoBlank,
      showNotifi,
      closeDrawerHandle,
      readNotifi
    }
  }
</script>